<template>
  <!-- 充电桩 电量分析 -->
  <div class="enterpriseConfig">
    <div class="powerAnalysisCard">
      <div class="cardTitle">
        充电电量分析
        <a-icon type="link" class="linkIcon" />
      </div>
      <div class="chartContainer" ref="powerAnalysisChartRef"></div>
    </div>
  </div>
</template>

<script setup>

import * as echarts from "echarts";
const props = defineProps({
  pileDetails: {
    type: Array,
    default: () => [],
  },
});
watch(
  () => props.pileDetails,
  async (newVal) => {
    if (newVal) {
      // 从 pileDetails 中提取月份数据并简化为只显示月份（用于x轴显示）
      const months = newVal.map(item => {
        const month = item.month || '';
        //提取月份部分
        if (month.includes('-')) {
          return month.split('-')[1] + '月';
        }
        return month + '月';
      });
      // 完整的月份信息用于tooltip显示
      const fullMonths = newVal.map(item => item.month || '');
      const sharpData = newVal.map((item) => item.totalSharpElectricity || 0);
      const peakData = newVal.map((item) => item.totalPeakElectricity || 0);
      const flatData = newVal.map((item) => item.totalFlatElectricity || 0);
      const valleyData = newVal.map((item) => item.totalValleyElectricity || 0);
      updateChartData(months, fullMonths, sharpData, peakData, flatData, valleyData);
    }
  }
);

// 更新图表数据的函数
const updateChartData = (months, fullMonths, sharpData, peakData, flatData, valleyData) => {
  if (!powerAnalysisChart) return;
  powerAnalysisChart.setOption({
    xAxis: {
      data: months
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow"
      },
      backgroundColor: "rgba(13, 20, 41, 0.9)",
      borderColor: "rgba(8, 146 ,164, 0.5)",
      borderWidth: 1,
      padding: [10, 15],
      textStyle: {
        color: '#fff',
        fontSize: 14
      },
      position: function (point, params, dom, rect, size) {
        // tooltip居中显示
        return [point[0] - size.contentSize[0] / 2, point[1] - size.contentSize[1] - 15];
      },
      formatter: function (params) {
        const index = params[0].dataIndex;
        const fullMonth = fullMonths[index];
        
        // 构建带有横线分隔的tooltip内容
        let titleStyle = 'text-align:center;margin-bottom:5px;padding-bottom:5px;border-bottom:1px solid rgba(255,255,255,0.2);font-size:14px;color:#fff;';
        let result = `<div style=${titleStyle}}>${fullMonth}</div>`;
        
        params.forEach((item) => {
          result += `<span style="color:${item.color}">${item.seriesName}: ${item.value} kWh</span><br/>`;
        });
        return result;
      },
    },
    series: [
      {
        name: "尖电量",
        data: sharpData,
      },
      {
        name: "峰电量",
        data: peakData,
      },
      {
        name: "平电量",
        data: flatData,
      },
      {
        name: "谷电量",
        data: valleyData,
      },
    ],
  });
};
// 图表引用
const powerAnalysisChartRef = ref(null);

// 图表实例
let powerAnalysisChart = null;

// 初始化充电电量分析图表
const initPowerAnalysisChart = () => {
  if (!powerAnalysisChartRef.value) return;

  powerAnalysisChart = echarts.init(powerAnalysisChartRef.value);

  const option = {
    legend: {
      show: true,
      top: 0,
      textStyle: {
        color: "#fff",
      },
      itemWidth: 10,
      itemHeight: 10,
      itemGap: 20,
    },
    grid: {
      left: "0",
      right: "0",
      bottom: "3%",
      top: "20%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      data: [],
      axisLine: {
        show: false,
      },
      axisLabel: {
        color: "#fff",
        fontSize: 12,
        align: 'center'
      },
      axisTick: {
        alignWithLabel: true
      }
    },
    yAxis: {
      type: "value",
      name: "(kWh)",
      nameTextStyle: {
        color: "#fff",
        fontSize: 12,
        align: "left",
      },
      axisLine: {
        show: false,
      },
      axisLabel: {
        color: "#fff",
        fontSize: 12,
      },
      splitLine: {
        lineStyle: {
          color: "rgba(255, 255, 255, 0.1)",
        },
      },
    },
    series: [
      {
        name: "尖电量",
        type: "bar",
        stack: "total",
        barWidth: 10,
        emphasis: {
          focus: "series",
        },
        data: [],
        itemStyle: {
          color: "#ff5a5a",
          borderRadius: [8, 8, 8, 8],
        },
      },
      {
        name: "峰电量",
        type: "bar",
        stack: "total",
        emphasis: {
          focus: "series",
        },
        data: [],
        itemStyle: {
          color: "#ffcc00",
          borderRadius: [8, 8, 8, 8],
        },
      },
      {
        name: "平电量",
        type: "bar",
        stack: "total",
        emphasis: {
          focus: "series",
        },
        data: [],
        itemStyle: {
          color: "#00ff7f",
          borderRadius: [8, 8, 8, 8],
        },
      },
      {
        name: "谷电量",
        type: "bar",
        stack: "total",
        emphasis: {
          focus: "series",
        },
        data: [],
        itemStyle: {
          color: "#1e90ff",
          borderRadius: [8, 8, 8, 8],
        },
      },
    ],
  };

  powerAnalysisChart.setOption(option);
};

const handleResize = () => {
  powerAnalysisChart && powerAnalysisChart.resize();
};

onMounted(() => {
  nextTick(() => {
    initPowerAnalysisChart();
  });
  window.addEventListener("resize", handleResize);
});

onUnmounted(() => {
  window.removeEventListener("resize", handleResize);
  powerAnalysisChart && powerAnalysisChart.dispose();
});
</script>

<style lang="less" scoped>
.enterpriseConfig {
  width: 100%;
  height: 100%;
  color: #fff;
  margin-top: 10px;
  .powerAnalysisCard {
    .cardTitle {
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 15px;
      color: #fff;
      border-left: 4px solid #4e83fd;
      padding-left: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .linkIcon {
        font-size: 14px;
        color: #4e83fd;
        cursor: pointer;
      }
    }

    .chartContainer {
      width: 100%;
      height: 300px;
    }
  }
}
.titleStyle{
  text-align: center;
}
@media (max-width: 1500px) {
  .enterpriseConfig {
    margin-top: 20px;
  }
}
</style>